<template>
  <div>
    <van-nav-bar
      title="城市列表"
      fixed
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-index-bar
      class="bar-box"
      highlight-color="#21b97a"
      :sticky="false"
      :index-list="['#', '热', ...indexList]"
    >
      <van-index-anchor index="#" class="col">当前城市</van-index-anchor>
      <van-cell :title="cityName" class="citystyle" />
      <van-index-anchor index="热" class="col">热门城市</van-index-anchor>
      <van-cell
        v-for="item in hotList"
        :key="item.label"
        :title="item.label"
        class="citystyle"
        @click="changePushName(item.label, item.value)"
      />

      <van-index-anchor
        v-for="(item, index) in indexList"
        :key="index"
        :index="item"
      >
        <span class="indexWord">{{ item }}</span>
        <van-cell
          v-for="(citem, cindex) in citys(item)"
          :key="cindex"
          :title="citem.label"
          class="citystyle pad"
          @click="changePushName(citem.label,citem.value)"
        />
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
import { cityList, hotCity } from '@/api/area'
import { mapState } from 'vuex'
export default {
  name: 'CityList',
  props: {},
  components: {},
  data () {
    return {
      hotList: '',
      cityList: '',
      firstName: null,
      indexAlt: '',
      str: '',
      indexList: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        '0',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ]
    }
  },
  async created () {
    // 城市列表
    const data = await cityList()
    this.cityList = data.body
    console.log(data.body)

    // 热门城市
    const hotData = await hotCity()
    console.log(hotData)
    this.hotList = hotData.body
  },
  methods: {
    citys (cap) {
      this.str = this.cityList.filter(item => {
        return item.short.substr(0, 1).toUpperCase() === cap
      })
      if (this.str.length) {
        return this.str
      } else {
        this.str = [{ label: '暂无城市' }]
        return this.str
      }
    },
    changePushName (name, area) {
      this.$store.commit('user/changeCityName', name)
      // const area = this.hotList.find(item => item.label === name).value
      this.$router.push({
        path: '/'
      })
      this.$store.commit('user/changeCityId', area)
    }
  },
  computed: {
    ...mapState('user', ['cityName'])
  }
}
</script>

<style scoped lang="less">
.bar-box {
  margin-top: 50px;
}
.col {
  color: #999;
}
.indexWord {
  color: #999;
  font-size: 14px;
}
.citystyle {
  color: #333;
  font-size: 16px;
}
.pad {
  margin-left: -17px;
}
</style>
